<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>使用onclick显示或隐藏内容</title>
<style>
	a{
		text-decoration:none;
		font-weight:bold;
		color:#7a7abf;
	}
	
	#hide_e{
		display:none;
	}
	#elevation{
		display:none;
	}
	#hide_p{
		display:none;
	}
	#photos{
		display:none;
	}
	#show_e{
		display:block;
	}
	#show_p{
		display:block;
	}
	.fakelink{
		cursor:pointer;
		text-decoration:none;
		font-weight:bold;
		color:#E03A3E;
	}
</style>
</head>

<body>
	<h1>Steptoe Butte</h1>
  <p>
  	<img src="logo.jpg" alt="View from Steptoe Butte"
    style="float:left;margin-right:12px;margin-bottom:6px;border:1px 
    solid #000" />
    Steptoe Butte is a quartzite island jutting out of the
    silty loess of the <a class="tip"
    href="#">Palouse <span>Learn more about the Palouse!</span></a>
    hills in Whitamn County, Washington. The rock that forms the butte is over 400 million years old, in contrast
    with the 15-7 million year old
    <a href="#">columbia River</a>
    basalte that underlie the rest of the Palouse (such "islands" of ancient
    rock have come to be called buttes, a butte being defined as a small hill
    with al flat top, whose width at top does not exceed ites height).</p>
    <p>A hotel built by Dashup Davis stood atop Steptoe Butte from 1888 to
    1908, burning down several years after it closed. In 1946, Virgil McCroskey
    donated 120 acres (0.49 mk2) of land to form Steptoe Butte State Park,
    which was later increased to over 150 acres (0.61 mk2). Steptoe Butte is
    currently recognized as a National Natural Landmark because of its unique
    geological value. It is named in honor of
    <a href="#">Colonel Edward Steptoe</a>.</p>
    <div class="fakelink"
    	id="show_e" 
      onClick="this.style.display='none';
      document.getElementById('hide_e').style.display='block';
      document.getElementById('elevation').style.display='inline';">&raquo; Show Elevation
    </div>
    <div class='fakelink' 
    	id="hide_e"
      onClick="this.style.display='none';
      document.getElementById('show_e').style.display='block';
      document.getElementById('elevation').style.display='none';">
    	&raquo; Hide Elevation
    </div>
    <div id='elevation'>3,612 feet (1,101 m), approximately 1,000 feet (300 m)
    above the surrounding countryside.</div>
    <div class='fakelink'
    	id='show_p'
      onClick="this.style.display='none';
      document.getElementById('hide_p').style.display='block';
      document.getElementById('photos').style.display='inline';">
      &raquo; Show Photos from the Top of Steptoe Butte</div>
    <div class='fakelink'
    	id='hide_p'
      onClick="this.style.display='none';
      document.getElementById('show_p').style.display='block';
      document.getElementById('photos').style.display='none';">
      &raquo; Hide Photos from the Top of Steptoe Butte</div>
    <div id='photos'><img src="logo.jpg" alt='View from Steptoe Butte'
    style="margin-right:12px;border:1px solid #000" /><img
    	src="logo.jpg" alt="View from Steptoe Butte"
      style="margin-right:12px;border:1px solid #000" /><img
      src="logo.jpg" alt="View from Stepoe Butte" style="margin-right:12px;
      border:1px solid #000" /></div>
    <p><em>Text from
    <a href="#">Wikipedia</a>, photos by the author.</em></p>
</body>
</html>
